這篇很簡單，依舊是 capacitor Plugin API ，我們在 Setting 頁面顯示 Device 跟 Network 的資訊。

延續之前 Day 9 主題切換 & Storage
在 Setting 資料夾，新增一個 device-info.page

Setting 建立一個 device-info.page Modal 的入口點。
setting.page.html

setting.page.ts

device-info.page.html 就很單純的顯示資訊

<ion-header>
  <ion-toolbar>
    <ion-title>手機資訊</ion-title>
    <ion-buttons slot="end" (click)="dismissModal()">
      <ion-icon name="close-circle-sharp"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>裝置資訊</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-item>
        <ion-label>型號</ion-label>
        {{ info?.model }}
      </ion-item>
      <ion-item>
        <ion-label> 平台 </ion-label>
        {{ info?.platform}}
      </ion-item>
      <ion-item>
        <ion-label> APP 版本 </ion-label>
        {{ info?.appVersion }}
      </ion-item>
      <ion-item>
        <ion-label> APP Build </ion-label>
        {{ info?.appBuild }}
      </ion-item>
      <ion-item>
        <ion-label> APP ID </ion-label>
        {{ info?.appId }}
      </ion-item>
      <ion-item>
        <ion-label> APP 名稱 </ion-label>
        {{ info?.appName }}
      </ion-item>
      <ion-item>
        <ion-label> 作業系統 </ion-label>
        {{ info?.operatingSystem }}
      </ion-item>
      <ion-item>
        <ion-label> 作業系統版本 </ion-label>
        {{ info?.osVersion }}
      </ion-item>
      <ion-item>
        <ion-label> 製造商 </ion-label>
        {{ info?.manufacturer }}
      </ion-item>
      <ion-item>
        <ion-label> 是否是模擬器 </ion-label>
        {{ info?.isVirtual }}
      </ion-item>
      <ion-item>
        <ion-label> 通用唯一辨識碼 </ion-label>
        {{ info?.uuid }}
      </ion-item>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title>電池</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-item>
        <ion-label>電量</ion-label>
        {{ batteryLevelpercentage(battery?.batteryLevel) }}
      </ion-item>
      <ion-item>
        <ion-label>充電中</ion-label>
        {{ battery?.isCharging }}
      </ion-item>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-title>網路</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-item>
        <ion-label>是否有連網?</ion-label>
        {{ network?.connected }}
      </ion-item>
      <ion-item>
        <ion-label>連線方式</ion-label>
        {{ network?.connectionType }}
      </ion-item>
    </ion-card-content>
  </ion-card>
</ion-content>

device-info.page.ts
capacitor Plugin API Device 跟 Network 匯入跟使用。

小結語，超廢的一篇XDDD

結果
這是在網頁版模擬的時候

這時我實機 Android